<template>
  <div class="user-select">
    <el-select
      v-model="userData"
      :multiple="multiple"
      :disabled="disabled"
      :placeholder="placeholder"
      popper-class="user-select-popper"
      :popper-append-to-body="false"
      @visible-change="visibleChange"
      @remove-tag="removeTag"
    >
      <el-option
        v-for="item in options"
        :key="item.userId"
        :label="item.userName"
        :value="item.userId"
      />
    </el-select>

    <!-- 单选 -->
    <radio-dialog
      :dialogVisible.sync="radioDialogVisible"
      :currentCheckedObj="options.length ? options[0] : null"
      :parentId="parentId"
      :treeParams="treeParams"
      @success="RadioSuccess"
    />

    <!-- 多选 -->
    <checkbox-dialog
      :dialogVisible.sync="checkboxDialogVisible"
      :currentCheckedArr="options"
      :parentId="parentId"
      :treeParams="treeParams"
      @success="checkboxSuccess"
    />
  </div>
</template>

<script>
import CheckboxDialog from "./components/checkbox-dialog";
import RadioDialog from "./components/radio-dialog";

export default {
  name: "",
  components: { CheckboxDialog, RadioDialog },
  mixins: [],
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: String,
    // 是否多选
    multiple: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    parentId: {
      type: Number,
      default: 0,
    },
    // 树查询参数
    treeParams: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      // 单选弹窗开关
      radioDialogVisible: false,
      // 多选弹窗开关
      checkboxDialogVisible: false,
      userData: [],
      options: [],
    };
  },
  computed: {},
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler() {
        this.setOptionsAndUserData();
      },
    },
  },
  created() {},

  destroyed() {},
  methods: {
    visibleChange(val) {
      if (val) {
        if (this.multiple) {
          this.checkboxDialogVisible = true;
        } else {
          this.radioDialogVisible = true;
        }
      }
    },
    removeTag(val) {
      this.$emit("change", this.resultFormat(this.options.filter((item) => item.userId !== val)));
    },
    /**
     * 单选选择回调
     */
    RadioSuccess(obj) {
      const { userId, userName } = obj;
      this.$emit("change", userId ? `${userId}|${userName}` : "");
    },
    /**
     * 多选选择回调
     */
    checkboxSuccess(checkedPersonArr) {
      this.$emit("change", this.resultFormat(checkedPersonArr));
    },
    /**
     * 回调结果格式化
     */
    resultFormat(val) {
      return val
        .map((item) => {
          const { userId, userName } = item;
          return `${userId}|${userName}`;
        })
        .join(",");
    },
    setOptionsAndUserData() {
      try {
        const reg = /^([0-9]+)\|(.+)$/;
        if (this.multiple) {
          let optionsArr = [];
          let userData = [];
          if (this.value) {
            const tempArr = this.value.split(",");
            tempArr.map((item) => {
              const arr = reg.exec(item);
              const userId = +arr[1];
              optionsArr.push({
                userName: arr[2],
                userId,
              });
              userData.push(userId);
            });
          }
          this.options = optionsArr;
          this.userData = userData;
        } else {
          if (this.value) {
            const arr = reg.exec(this.value);
            const userId = +arr[1];
            this.options = [{ userName: arr[2], userId }];
            this.userData = userId;
          } else {
            this.options = [];
            this.userData = "";
          }
        }
      } catch (e) {
        this.$message.error("人员选择框数据格式不正确，请检查");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-select {
  ::v-deep .user-select-popper {
    display: none !important;
  }
  ::v-deep .el-select .el-input .el-select__caret {
    transform: rotateZ(0deg);
    &::before {
      content: "\e6e3";
    }
  }
}
</style>
